<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>动态相册</title>
    <style type="text/css"> /* TODO: 23/5/7 实现内容居页面中心，先实现左右居中 */
    /* 居中显示 */
    .parent_div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    button {
        vertical-align: middle;
    }

    /* 设置标题列表大小 */
    table {
        width: 300px;
        height: 300px;
    }

    td {
        width: 100px;
    }

    span {
        color: red;
    }

    /* 图片修改 */
    img {
        width: 400px;
        height: 400px;
        border-radius: 50%;
    }
    </style>
</head>
<body>
<div class="parent_div">
    <!-- 图片展示 -->
    <div class="picture_display">
        <img id="image" src="./../asset/images/tu.jpg" alt="那年那兔">
    </div>
    <!-- 搜索栏和相册名展示 -->
    <div class="text_display">
        <div id="search_display">
            <form action="https://image.baidu.com/search/index">
                <label>
                    <input type="text" name="word">
                    <input type="hidden" name="tn" value="baiduimage">
                </label>
                <button type="submit">搜索</button>
            </form>
        </div>
        <div id="title_display">
            <table>
                <tr>
                    <td>
                        <span>中国国宝</span>
                    </td>
                    <td></td>
                    <td>
                        <span>兵马俑</span>
                    </td>
                </tr>
                <tr>
                    <td><span>川菜</span></td>
                    <td></td>
                    <td><span>粤菜</span></td>
                </tr>
                <tr>
                    <td><span>新疆风情</span></td>
                    <td></td>
                    <td><span>客家土楼</span></td>
                </tr>
                <tr>
                    <td><span>民族乐器</span></td>
                    <td></td>
                    <td><span>青铜重器</span></td>
                </tr>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
    let spans = document.getElementsByTagName("span");/* 获取所以的span对象 */
    for (let i = 0; i < spans.length; i++) {    /* 绑定事件 */
        spans[i].onclick = jumpToHref;
        spans[i].onmouseover = start;
        spans[i].onmouseout = end;
    }

    /* 跳转到指定标题搜索网页 */
    function jumpToHref() {
        /* 网页跳转 */
        window.location.href = "https://image.baidu.com/search/index?word=" + window.event.target.innerHTML + "&tn=baiduimage";
    }

    let interval = null;  /* 计时器 */
    let name = "";   /* 获取标题名称 */
    let i = 1;  /* 累加变量 */
    let opa = 1;    /* 图片不透明度，完全透明opa=0，完全不透明opa=1，半透明opa=0.6 */
    let url = "";    /* 图片地址 */
    let time_1 = null, time_2 = null;   /* 图片淡出周期变量time_1，图片淡入周期变量time_2 */

    /* 图片轮播幻灯片 */
    function slide() {
        if (time_1) {
            clearInterval(time_1);
        }
        time_1 = setInterval(function () {  /* 图片淡出 */
            opa -= 0.1;/* 透明度递减 */
            if (opa <= 0) { /* 如果不透明度为0，说明图片完全消失 */
                clearInterval(time_1);/* 结束图片淡出周期 */
                opa = 0;/* 不透明度为0，图片完全看不见 */
                if (i === 7) {  /* 切换图片，当来到第7张图片，重回第1张图片 */
                    i = 1;
                }
                i++;
                url = "./../asset/images/" + name + "/" + i + ".jpg" /* 获取图片地址 */
                show();
            }
            document.getElementById("image").style.opacity = opa;   /* 设置图片不透明度 */
            document.getElementById("image").setAttribute("src", url);  /* 修改图片地址 */
            document.getElementById("image").setAttribute("alt", name); /* 修改图片标题 */
        }, 16.7)

    }

    function show() {
        time_2 = setInterval(function () {  /* 图片淡入 */
            opa += 0.1; /* 不透明度递增 */
            if (opa >= 1) { /* 当不透明度为1说明图片完全显示 */
                clearInterval(time_2);  /* 结束图片淡入周期 */
                opa = 1;    /* 不透明度为1 */
            }
            document.getElementById("image").style.opacity = opa;   /* 设置图片不透明度 */
        }, 16.7)
    }

    /* 开始 */
    function start() {
        name = window.event.target.innerHTML;
        if (interval != null) {     /* 如果计时器不为空，则结束轮播并将其置空 */
            clearInterval(interval);
            interval = null;
        }
        /* 轮播幻灯片 */
        interval = setInterval(slide, 1000);
    }

    /* 结束 */
    function end() {
        /* 结束轮播 */
        clearInterval(interval);
        interval = null;
    }
</script>
</body>
</html>